<template>
  <div id="selSeat">
    <el-card class="box-card" style="width: 500px;heigh: 500px;margin-left: 500px">
      <span>屏幕</span>
      <!-- 列 -->
      <div v-for="i in 9" :key="i">
        <!-- 行 -->
          <div v-for="j in 5" :key="j">
            <div @click="sel(i,j)">
              <seat :id="i+','+j" ></seat>
            </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="float: left;width: 500px;heigh: 500px;">
      <el-button type="danger">购买</el-button>
    </el-card>
    <el-card class="box-card" style="width: 500px;heigh: 500px;margin-left: 500px">
      <el-tag
        v-for="tag in tags"
        :key="tag.name"
        closable
        :disable-transitions="false"
        effect="plain"
        @close="off(tag)"
        >
        {{tag.name}}
      </el-tag>
    </el-card>
    
    
  </div>
</template>

<script>
import seat from "./Seat.vue"

export default {
  name:"selSeat",
  components:{
    seat
  },
  data() {
    return {
      tags: [],
    }
  },
  methods:{
    sel(x,y){
      let one = { name:x+"排"+y+"座"};
      for (let index = 0; index < this.tags.length; index++) {
        const element = this.tags[index];
        if(element.name==one.name){
          this.tags.splice(index,1);
          return;
        }
      }
      this.tags.push(one);
      console.log(this.tags);
    },
    off(e){
      let id = e.name.substr(0,e.name.indexOf("排"))+","+e.name.substr(e.name.indexOf("排")+1,e.name.indexOf("座")-2);
      const obj = document.getElementById(id);
      obj.click();
    }
  }
}
</script>
